<template>
  <view class="pwd-retrieve-container">
	  <view class="grid-boxs">
		  <uni-forms ref="form" :value="user" labelWidth="80px">
		    <uni-forms-item name="oldPassword" label="旧密码" required>
		      <uni-easyinput type="password"  v-model="user.oldPassword" placeholder="请输入旧密码" />
		    </uni-forms-item>
		    <uni-forms-item name="newPassword" label="新密码" required>
		      <uni-easyinput type="password"  v-model="user.newPassword" placeholder="请输入新密码" />
		    </uni-forms-item>
		    <uni-forms-item name="confirmPassword" label="确认密码" required>
		      <uni-easyinput type="password"  v-model="user.confirmPassword" placeholder="请确认新密码" />
		    </uni-forms-item>
			<view class="logout" @click="submit">
			  <text class="logout-text">保存</text>
			</view>
		  </uni-forms>
	  </view>
    
  </view>
</template>

<script>
  import { updateUserPwd } from "@/api/system/user"
  import {removeToken,removeChangeToken} from '@/utils/auth'

  export default {
    data() {
      return {
        user: {
          oldPassword: undefined,
          newPassword: undefined,
          confirmPassword: undefined
        },
        rules: {
          oldPassword: {
            rules: [{
              required: true,
              errorMessage: '旧密码不能为空'
            }]
          },
          newPassword: {
            rules: [{
                required: true,
                errorMessage: '新密码不能为空',
              },
             {
               validateFunction: function (rule, value, data, callback) {
                 const regex = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/
                 console.log(regex.test(value))
             					  if (!regex.test(value)) {
                   callback('密码中必须包含大写字母、小写字母、数字和特殊符号，长度在8-20位之间！')
                 }
                 return true
               },
             },
            ]
          },
          confirmPassword: {
            rules: [{
                required: true,
                errorMessage: '确认密码不能为空'
              }, {
                validateFunction: (rule, value, data) => data.newPassword === value,
                errorMessage: '两次输入的密码不一致'
              }
            ]
          }
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      submit() {
        this.$refs.form.validate().then(res => {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
            this.$modal.msgSuccess("修改成功")
			setTimeout(()=>{
				this.$store.dispatch('LogOut').then(() => {
					removeToken()
					removeChangeToken()
				  this.$tab.reLaunch('pages/login')
				})
			},1000)
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F7F7F7;
  }
  /deep/ .pwd-retrieve-container .grid-boxs .uni-forms-item{
  	  margin-bottom: 80rpx;
  }
  .logout{
  	  display: flex;
  	  align-items: center;
  	  justify-content: center;
  	  width: 100%;
  	  margin: 0 auto;
  	  background:#1890FF ;
  	  height: 80rpx;
  	  border-radius: 15rpx;
  	  .logout-text{
  		  color: #FFFFFF;
  	  }
  }
	.grid-boxs{
			width: 92%;
			margin: 0 auto;
			border-radius: 8px;
			background-color: white;
			padding:20rpx 12rpx ;
			margin-top: 20rpx;
			.text{
				margin-left: 12rpx;
			}
		}
  .pwd-retrieve-container {
    padding-top: 36rpx;
    padding: 15px;
  }
</style>
